<template>
  <div>
    <van-field
    v-model="myItem.propValues[modelIndex].value" 
    is-link
    readonly
    clickable
    :label="myItem.propValues[labelIndex].value" 
    :name="myItem.propValues[labelIndex].value" 
    :placeholder="myItem.propValues[placeholderIndex].value" 
    :required="myItem.propValues[requiredIndex].value" 
    @click="showPicker = true"
    />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
  </div>
</template>
<script>
export default {
  props: {
    myItem: {},
  },
  data() {
    return {
      showPicker: false,
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      modelIndex: 0,
      labelIndex: 1,
      placeholderIndex: 2,
      requiredIndex: 3
    };
  },
  methods: {
    onConfirm(value) {
      this.myItem.propValues[this.modelIndex].value = value;
      console.log(this.myItem.propValues[this.modelIndex].value);
      this.showPicker = false;
    },
  },
};
</script>